<template>
  <div>
    <div id="header">
      <div
        class="header_top"
        :style="{ background: 'rgba(95, 204, 147, ' + Num + ')' }"
      >
        <div>上海 <van-icon name="arrow-down" /></div>

        <div>
          <b>身临其境挑选好房</b> &nbsp;<van-icon
            name="play-circle"
            color="#fff"
            size="16px"
          />
        </div>

        <div><van-icon name="map-marked" color="#fff" size="16px" /> 地图</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
  components: {},
  data() {
    return {
      Num: 0,
      color: 1,
    };
  },
  mounted() {
    var _this = this;
    document.addEventListener(
      "scroll",
      function () {
        var scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        _this.Num = scrollTop / 30;
      },
      true
    );

    document.addEventListener(
      "scroll",
      function () {
        var scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        _this.Num = scrollTop / 30;
      },
      true
    );
  },
  methods: {
    swipeup() {
      console.log("向上移动");
    },
  },
};
</script>

<style scoped>
#header {
  height: 0.6rem;
}
.header_top {
  display: flex;
  width: 3.39rem;
  height: 0.36rem;
  padding: 0 0.18rem;
  justify-content: space-between;
  line-height: 0.36rem;
  color: #fff;
  /* position: fixed; */
  top: 0;
  z-index: 222;
}
.header_top div {
  font-size: 0.12rem;
}
b {
  font-size: 0.2rem;
}
</style>
